<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[<!ENTITY skin_color_ff "#ff0000">
 <!ENTITY skin_color_aa "#aa0000">
 <!ENTITY skin_color_cc "#cc0000">
 <!ENTITY skin_color_88 "#880000">
 <!ENTITY skin_color_55 "#550000">
 <!ENTITY skin_color_44 "#440000">]>

<html xmlns="http://www.w3.org/1999/xhtml">

<body onload="init()"  bgcolor="black" >
<svg width="800" height="480" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript" xlink:href="redAndBlack/button.js" />
<script type="text/javascript" xlink:href="redAndBlack/simpleSlider.js" />
<script type="text/javascript" xlink:href="redAndBlack/textList.js" />

<script language="javascript" xlink:href="xulplayer/player.js" > </script>
<script language="javascript" xlink:href="xulplayer/common.js" > </script>



<script language="javascript" xlink:href="date.js" > </script>
<script language="javascript" xlink:href="weather.js" > </script>
<defs>
    <linearGradient id="selectedColor"  x1="0%" y1="0%" x2="0%" y2="100%">
      <stop style="stop-color:&skin_color_ff;;" offset="0"/>
      <stop style="stop-color:&skin_color_ff;;" offset="1" />
    </linearGradient>

    <linearGradient id="highlightedColor"  x1="0%" y1="0%" x2="0%" y2="100%">
      <stop style="stop-color:&skin_color_88;;" offset="0"/>
      <stop style="stop-color:&skin_color_88;;" offset="1" />
    </linearGradient>

    <linearGradient id="backgroundGradient"  x1="0%" y1="0%" x2="0%" y2="100%">
      <stop style="stop-color:#111111;" offset="0"/>
      <stop style="stop-color:#000000;" offset="1" />
    </linearGradient>

    <linearGradient id="buttonGradient"  x1="0%" y1="0%" x2="0%" y2="100%">
      <stop style="stop-color:#333333;stop-opacity:1;" offset="0"/>
      <stop offset="1" style="stop-color:#888888" />
    </linearGradient>

    <linearGradient id="volumeGradient"  x1="0%" y1="0%" x2="0%" y2="100%">
      <stop style="stop-color:&skin_color_ff;;stop-opacity:1;" offset="0"/>
      <stop offset="1" style="stop-color:&skin_color_55;" />
    </linearGradient>

    <linearGradient id="sliderShineGradient"  x1="0%" y1="0%" x2="0%" y2="100%">
      <stop style="stop-color:#ffffff;stop-opacity:1;" offset="0"/>
      <stop style="stop-color:#ffffff;stop-opacity:0;" offset="0.2" />
      <stop style="stop-color:#ffffff;stop-opacity:0;" offset="0.8" />
      <stop style="stop-color:#ffffff;stop-opacity:0.2;" offset="1" />
    </linearGradient>

    <linearGradient id="songPosGradient">
      <stop style="stop-color:&skin_color_44;;stop-opacity:1;" offset="0"/>
      <stop offset="1" style="stop-color:&skin_color_cc;" />
    </linearGradient>

    <linearGradient id="volumeShineGradient"  x1="0%" y1="0%" x2="0%" y2="100%">
      <stop style="stop-color:#ffffff;stop-opacity:1;" offset="0"/>
      <stop offset="0.1" style="stop-color:#ffffff;stop-opacity:0" />
    </linearGradient>

    <linearGradient id="infoGradient"  x1="0%" y1="0%" x2="0%" y2="100%">
      <stop style="stop-color:#ffffff;stop-opacity:1;" offset="0"/>
      <stop style="stop-color:#ffffff;stop-opacity:0;" offset="0.2" />
    </linearGradient>

    <linearGradient id="barGradient1" >
      <stop style="stop-color:#000000;stop-opacity:0.3;" offset="0"/>
      <stop style="stop-color:#000000;stop-opacity:0.3;" offset="0.5" />
      <stop style="stop-color:#000000;stop-opacity:0.7;" offset="0.8" />
      <stop style="stop-color:#000000;stop-opacity:0.6;" offset="1" />
    </linearGradient>

    <linearGradient id="barGradient2" x1="0%" y1="0%" x2="0%" y2="100%" >
      <stop style="stop-color:#ffffff;stop-opacity:0;" offset="0"/>
      <stop style="stop-color:#ffffff;stop-opacity:0.3;" offset="0.2" />
      <stop style="stop-color:#ffffff;stop-opacity:0.01;" offset="0.7" />
      <stop style="stop-color:#ffffff;stop-opacity:0.3;" offset="1" />
    </linearGradient>

	<filter id="Myfilter"
		x="-0.54904574"
		width="2.0980915"
		y="-1.2434271"
		height="3.4868541">
		<feGaussianBlur stdDeviation="14" result="blur"/>
	</filter>

	<filter id="MyFilter2" filterUnits="userSpaceOnUse">
		<desc>Produces a 3D lighting effect.</desc>
		<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
		<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="100" lighting-color="#888888" result="specOut">
			<fePointLight x="-5000" y="-10000" z="20000"/>
		</feSpecularLighting>
		<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
		<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
		<feMerge>
			<feMergeNode in="blur"/>
			<feMergeNode in="litPaint"/>
		</feMerge>
	</filter>

	<filter id="MyFilter3" filterUnits="userSpaceOnUse">
		<desc>Produces a 3D lighting effect.</desc>
		<feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur"/>
	</filter>

	<g id="Bar" >
		<rect ry="5" rx="5" x="0" y="0" height="279" width="50" style="fill:#555555;" />
		<path d="m0,2.5 L0,50 L25,61 L50,50 L50,2.5 " style="fill:#000000;" />
		<path d="m0,2.5 L0,48 L25,58 L50,48 L50,2.5 " style="fill:&skin_color_ff;;" />
		<rect ry="5" rx="5" x="0" y="0" height="279" width="50" style="fill:url(#barGradient1);" />
		<rect rx="4" ry="4" x="6" y="8" width="8" height="261" style="fill:url(#barGradient2);" />
		<rect ry="4" rx="4" x="0" y="0" height="100" width="50" style="fill:url(#volumeShineGradient)"/>
	</g>
	<g id="infoSliderCircle">
		<circle cx="0" cy="0" r="3" stroke="#000000" stroke-width="2" fill="&skin_color_88;" />
		<circle cx="0" cy="0" r="1" fill="#888888" />
	</g>
	<g id="infoSliderCircles">
		<use x="17" y="25" xlink:href="#infoSliderCircle" />
		<use x="27" y="25" xlink:href="#infoSliderCircle" />
		<use x="37" y="25" xlink:href="#infoSliderCircle" />
		<use x="17" y="35" xlink:href="#infoSliderCircle" />
		<use x="27" y="35" xlink:href="#infoSliderCircle" />
		<use x="37" y="35" xlink:href="#infoSliderCircle" />
		<use x="17" y="45" xlink:href="#infoSliderCircle" />
		<use x="27" y="45" xlink:href="#infoSliderCircle" />
		<use x="37" y="45" xlink:href="#infoSliderCircle" />
	</g>

	<g id="infoSliderWhole">
		<rect ry="8" rx="8" x="0" y="0" height="285" width="56" style="fill:#000000;" />

		<rect ry="8" rx="8" x="0" y="0" height="56" width="56" style="fill:#000000;" />
		<rect ry="4" rx="4" x="3" y="3" height="50" width="50" style="fill:#333333"/>
		<rect ry="2" rx="2" x="3" y="3" height="25" width="50" style="fill:url(#buttonGradient)"/>
		<text x="28" y="28" font-family="Verdana" font-size="16" fill="#ffffff" style="dominant-baseline: central;text-anchor: middle;" >Up</text>

		<rect ry="8" rx="8" x="0" y="100" height="70" width="56" style="fill:#000000;" />
		<rect ry="4" rx="4" x="2" y="100" height="70" width="52" style="fill:url(#volumeGradient);" />
		<rect ry="4" rx="4" x="3" y="100" height="70" width="50" style="fill:url(#sliderShineGradient)"/>
		<use x="0" y="100" xlink:href="#infoSliderCircles" />

		<rect ry="8" rx="8" x="0" y="229" height="56" width="56" style="fill:#000000;" />
		<rect ry="4" rx="4" x="3" y="232" height="50" width="50" style="fill:#333333"/>
		<rect ry="2" rx="2" x="3" y="232" height="25" width="50" style="fill:url(#buttonGradient)"/>
		<text x="28" y="257" font-family="Verdana" font-size="16" fill="#ffffff" style="dominant-baseline: central;text-anchor: middle;" >Down</text>
	</g>
</defs>

<g id="common">
	<rect x="0" y="0" width="800" height="480" fill="#333333" />
	<rect x="0" y="447" width="800" height="33" fill="url(#backgroundGradient)" />

	<g transform="translate(66,4)" >
		<rect ry="8" rx="8" x="0" y="0" height="90" width="730" style="fill:#000000;" />
		<rect ry="4" rx="4" x="0" y="0" height="90" width="730" style="fill:url(#infoGradient);" />
		<text x="10" y="38" font-family="Verdana" font-size="28" fill="#ffffff" >Currently Playing Track</text>
		<text x="10" y="70" font-family="Verdana" font-size="20" fill="#ffffff" >Artist/Album Title</text>
		<text x="725" y="38" font-family="Verdana" font-size="28" fill="#ffffff" text-anchor="end" id="timeText" >-00:00</text>
	</g>
</g>

<g id="radio">
	<g transform="translate(66,100)" >
		<rect ry="8" rx="8" x="0" y="0" height="315" width="670" style="fill:#000000;" />
	</g>
	<g id="siriusImage" />
	<g id="presetBar" onclick="slideBars(0)" transform="translate(299,103) scale(1,1.11)" >
		<use xlink:href="#Bar" />
		<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(28,245) rotate(-90)">P R E S E T S</text>
	</g>
	<g id="amBar" onclick="slideBars(1)" transform="translate(353,103) scale(1,1.11)">
		<use xlink:href="#Bar" />
		<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(28,245) rotate(-90)">A M</text>
	</g>
	<g id="fmBar" onclick="slideBars(2)" transform="translate(407,103) scale(1,1.11)">
		<use xlink:href="#Bar" />
		<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(28,245) rotate(-90)">F M</text>
	</g>
	<g id="satBar" onclick="slideBars(3)" transform="translate(461,103) scale(1,1.11)">
		<use xlink:href="#Bar" />
		<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(28,245) rotate(-90)">S A T</text>
	</g>
	<g id="internetBar" onclick="slideBars(4)" transform="translate(683,103) scale(1,1.11)">
		<use xlink:href="#Bar" />
		<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(28,245) rotate(-90)">I N T E R N E T</text>
	</g>

	<g id="infoSlider" transform="translate(740,100)" >
		<use x="0" y="0" xlink:href="#infoSliderWhole" />
	</g>
</g>

<g id="phone">
</g>

<g id="main">
	<g id="radioIcon" transform="translate(110, 110)" onclick="showRadio()" >
		<rect x="0" y="0" width="135" height="135" rx="8" ry="8" fill="#000000" />

		<g filter="url(#MyFilter3)">
			<rect x="15" y="45" width="110" height="55" rx="3" ry="3" fill="&skin_color_ff;" />
			<g transform="translate(100, 50) rotate(210)">
				<circle cx="50" cy="2.5" r="5" fill="&skin_color_ff;" />
				<rect x="0" y1="0" width="50" height="4" fill="&skin_color_ff;" />
			</g>
		</g>

		<g transform="translate(100, 50) rotate(210)">
			<circle cx="50" cy="2.5" r="5" stroke="&skin_color_ff;" stroke-width="1"  />
			<rect x="0" y1="0" width="50" height="4" stroke="&skin_color_ff;" stroke-width="1"/>
		</g>
		<rect x="15" y="45" width="110" height="55" rx="3" ry="3" stroke="&skin_color_ff;" stroke-width="1" />
		<g transform="translate(100, 50) rotate(210)">
			<circle cx="50" cy="2.5" r="5" fill="#000000" />
			<rect x="0" y1="0" width="50" height="4" fill="#000000" />
		</g>

		<rect x="25" y="60" width="20" height="7" rx="2" ry="2" fill="&skin_color_aa;" />
		<rect x="50" y="60" width="60" height="7" rx="2" ry="2" fill="&skin_color_aa;" />

		<rect ry="8" rx="8" x="0" y="0" height="135" width="135" style="fill:url(#infoGradient);" />
	</g>

	<g id="videoIcon" transform="translate(280, 110) " onclick="showphone()" >
		<rect x="0" y="0" width="135" height="135" rx="8" ry="8" fill="#000000" />

		<g filter="url(#MyFilter3)">
			<rect x="35" y="42" width="70" height="73" rx="3" ry="3" fill="&skin_color_ff;" />
			<rect x="15" y="40" width="110" height="65" rx="3" ry="3" fill="&skin_color_ff;" />
		</g>

		<rect x="35" y="42" width="70" height="73" rx="3" ry="3" stroke="&skin_color_ff;" stroke-width="1" />
		<rect x="15" y="40" width="110" height="65" rx="3" ry="3" stroke="&skin_color_ff;" stroke-width="1" />
		<rect x="25" y="50" width="90" height="45" rx="3" ry="3" fill="&skin_color_44;" stroke="&skin_color_ff;" stroke-width="1" />
		<rect x="25" y="80" width="90" height="2" rx="3" ry="3" fill="&skin_color_cc;" />


		<rect ry="8" rx="8" x="0" y="0" height="135" width="135" style="fill:url(#infoGradient);" />
	</g>

	<g id="mp3Icon" transform="translate(110, 260) " onclick="showmp3()" >
		<rect x="0" y="0" width="135" height="135" rx="8" ry="8" fill="#000000" />
		<g filter="url(#MyFilter3)">
			<path d="M28,105 v-45 a8,8 0 0,1 80,0 v45 h-15 v-45 a8,8 0 0,0 -50,0 v45 z" fill="&skin_color_ff;" />
			<path d="M24,105 v-35 a40,40 0 0,0 -12,8 v19 a40,40 0 0,0 12,8 z" fill="&skin_color_ff;" />
			<path d="M112,105 v-35 a40,40 0 0,1 12,8 v19 a40,40 0 0,1 -12,8 z" fill="&skin_color_ff;" />
		</g>
		<path d="M28,105 v-45 a8,8 0 0,1 80,0 v45 h-15 v-45 a8,8 0 0,0 -50,0 v45 z" fill="&skin_color_44;"  stroke="&skin_color_ff;" stroke-width="1" />
		<path d="M24,105 v-35 a20,20 0 0,0 -12,6 v23 a20,20 0 0,0 12,6 z" fill="&skin_color_44;"  stroke="&skin_color_ff;" stroke-width="1" />
		<path d="M112,105 v-35 a20,20 0 0,1 12,6 v23 a20,20 0 0,1 -12,6 z" fill="&skin_color_44;"  stroke="&skin_color_ff;" stroke-width="1" />
		<rect ry="8" rx="8" x="0" y="0" height="135" width="135" style="fill:url(#infoGradient);" />
	</g>

	<g id="phoneIcon" transform="translate(280, 260) " onclick="showphone()" >
		<rect x="0" y="0" width="135" height="135" rx="8" ry="8" fill="#000000" />

		<g filter="url(#MyFilter3)">
		<path transform="rotate(-25)" d="M05,75 h59 a16,16 0 0,1 16,16 v5 h-25 v-9 h-40 v9 h-25 v-5 a16,16 0 0,1 16,-16"  fill="&skin_color_ff;" />
		</g>

		<path transform="rotate(-25)" d="M05,75 h59 a16,16 0 0,1 16,16 v5 h-25 v-9 h-40 v9 h-25 v-5 a16,16 0 0,1 16,-16"  fill="&skin_color_44;"  stroke="&skin_color_ff;" stroke-width="1" />

		<rect ry="8" rx="8" x="0" y="0" height="135" width="135" style="fill:url(#infoGradient);" />
	</g>

	<g id="stuffIcon" transform="translate(450, 110) " onclick="showphone()" >
		<rect x="0" y="0" width="135" height="135" rx="8" ry="8" fill="#000000" />

		<g filter="url(#MyFilter3)">
			<circle cx="35" cy="80" r="15" fill="&skin_color_ff;" />
			<circle cx="100" cy="80" r="15" fill="&skin_color_ff;" />
			<circle cx="67" cy="60" r="25" fill="&skin_color_ff;" />
		</g>

		<circle cx="35" cy="80" r="15" stroke="&skin_color_ff;" stroke-width="1" />
		<circle cx="100" cy="80" r="15" stroke="&skin_color_ff;" stroke-width="1" />
		<circle cx="67" cy="60" r="25" stroke="&skin_color_ff;" stroke-width="1" />
		<line x1="67" y1="70" x2="50" y2="50" stroke="&skin_color_ff;" stroke-width="2" />
		<line x1="35" y1="80" x2="35" y2="70" stroke="&skin_color_ff;" stroke-width="2" />
		<line x1="100" y1="80" x2="105" y2="70" stroke="&skin_color_ff;" stroke-width="2" />

		<rect ry="8" rx="8" x="0" y="0" height="135" width="135" style="fill:url(#infoGradient);" />
	</g>

	<g id="gpsIcon" transform="translate(450, 260) " onclick="showgps()" >
		<rect x="0" y="0" width="135" height="135" rx="8" ry="8" fill="#000000" />

		<g filter="url(#MyFilter3)">
			<rect  x="-37" y="60" width="70" height="70" fill="&skin_color_ff;" transform="rotate(-45)" />
		</g>

		<rect  x="-37" y="60" width="70" height="70" stroke="&skin_color_ff;" stroke-width="1" transform="rotate(-45)" />
		<path d="m80,90 v-35 h-25 v-5 l-10,10 l10,10 v-5 h15 v25 z" fill="&skin_color_44;" stroke="&skin_color_ff;" />

		<rect ry="8" rx="8" x="0" y="0" height="135" width="135" style="fill:url(#infoGradient);" />
	</g>

	<g id="weatherIcon" transform="translate(620, 110) " onclick="showWeather()" >
		<rect x="0" y="0" width="135" height="135" rx="8" ry="8" fill="#000000" />

		<g filter="url(#MyFilter3)">
			<circle cx="67" cy="67" r="50" fill="&skin_color_ff;" />
		</g>

		<circle cx="67" cy="67" r="50" stroke="&skin_color_ff;" stroke-width="1" fill="&skin_color_88;" />
		<path d="m40,80 a10,10 0 0,1 15,2 a10,10 0 0,1 20,9 a10,10 0 0,1 20,-19 a10,10 0 0,1 20,29  a20,20 0 0,1 -30,10 a30,30 0 0,1 -20,3  a10,10 0 0,1 -18,-10 a10,10 0 0,1 -20,-9 z"  fill="#000000" />

		<rect ry="8" rx="8" x="0" y="0" height="135" width="135" style="fill:url(#infoGradient);" />
	</g>

	<g id="moreIcon" transform="translate(620, 260) " onclick="showphone()" >
		<rect x="0" y="0" width="135" height="135" rx="8" ry="8" fill="#000000" />

		<g filter="url(#MyFilter3)">
			<text x="70" y="70" font-family="Verdana" font-size="48" fill="&skin_color_ff;" style="dominant-baseline: central;text-anchor: middle;" >MORE</text>
		</g>
		<text x="70" y="70" font-family="Verdana" font-size="48" stroke="&skin_color_ff;" stroke-width="2" style="dominant-baseline: central;text-anchor: middle;" >MORE</text>

		<rect ry="8" rx="8" x="0" y="0" height="135" width="135" style="fill:url(#infoGradient);" />
	</g>
</g>

<g id="mp3">
	<g transform="translate(66,100)" >
		<rect ry="8" rx="8" x="0" y="0" height="285" width="670" style="fill:#000000;" />
	</g>
	<g transform="translate(353,103)" >
		<use xlink:href="#Bar" />
		<text x="24" y="25" font-family="Verdana" font-size="16" font-weight="bold" fill="#000000" style="dominant-baseline: central;text-anchor: middle;">ALL</text>
		<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(28,245) rotate(-90)">A R T I S T S</text>
	</g>
	<g transform="translate(407,103)" >
		<use xlink:href="#Bar" />
		<text x="24" y="25" font-family="Verdana" font-size="16" font-weight="bold" fill="#000000" style="dominant-baseline: central;text-anchor: middle;">ALL</text>
		<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(28,245) rotate(-90)">A L B U M S</text>
	</g>
	<g transform="translate(461,103)" >
		<use xlink:href="#Bar" />
		<text x="24" y="25" font-family="Verdana" font-size="16" font-weight="bold" fill="#000000" style="dominant-baseline: central;text-anchor: middle;">ALL</text>
		<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(28,245) rotate(-90)">S O N G S</text>
	</g>
	<g transform="translate(66,392)" >
		<rect ry="4" rx="4" x="0" y="0" height="20" width="730" style="fill:#000000;" />
		<rect ry="4" rx="4" x="1" y="2" height="17" width="200" style="fill:url(#songPosGradient);" />
	</g>
	<g transform="translate(260,392)" >
		<rect ry="4" rx="4" x="0" y="0" height="23" width="34" style="fill:#000000;" />
		<rect ry="4" rx="4" x="2" y="0" height="20" width="30" style="stroke:#444444;stroke-width:2;"/>
		<rect ry="3" rx="3" x="4" y="2" height="17" width="26" style="fill:#111111"/>
		<rect ry="3" rx="3" x="4" y="2" height="9" width="26" style="fill:#555555"/>
		<rect x="12" y="5" height="9" width="2" style="fill:#aaaaaa"/>
		<rect x="17" y="5" height="9" width="2" style="fill:#aaaaaa"/>
		<rect x="22" y="5" height="9" width="2" style="fill:#aaaaaa"/>
	</g>
	<g id="infoSlider" transform="translate(740,100)" >
		<use x="0" y="0" xlink:href="#infoSliderWhole" />
	</g>
</g>

<g id="gps">
</g>

<g id="weather">
	<g transform="translate(66,100)" >
		<rect ry="8" rx="8" x="0" y="0" height="315" width="670" style="fill:#000000;" />
	</g>
	<g id="localBar" onclick="showLocalWeather()" transform="translate(70,103) scale(1,1.11)" >
		<use xlink:href="#Bar" />
		<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(28,245) rotate(-90)">L O C A L</text>
	</g>
	<g id="destBar" onclick="showDestWeather()" transform="translate(683,103) scale(1,1.11)">
		<use xlink:href="#Bar" />
		<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(28,245) rotate(-90)">D E S T I N A T I O N</text>
	</g>
	<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(125,125)" id="weatherLocation"></text>
	<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(125,145)" id="weatherCondition"></text>
	<text x="0" y="0" font-family="Verdana" font-size="13"  fill="#ffffff" transform="translate(125,165)" id="weatherTemperature"></text>
	<g id="currentWeatherImage" />
	<g id="hourlyForcast" />
	<g id="dailyForcast" />
	<g id="radarImage" />
</g>
</svg>
	<div id="gpsMap" >
		<object id="googleMap" style="position:absolute; left: 66px; top: 100px; width:750px;height:330px" data="maps.html" type="text/html"></object>
		<div id="gpsDirections" style="display:none;position:absolute; left: 0px; top: 0px; width: 0px; height: 0px;"/>
	</div>

	<embed width="0" height="0" style="position:absolute; left: 0px; top: 0px; width: 0px; height: 0px;" id="lcd" type="application/x-xulplayer-scriptable-plugin"/>

<script type="text/javascript">
<![CDATA[

	function SiriusChannel(category,number,desc,name,icon)
	{
		this.category = category;
		this.number = number;
		this.desc = desc;
		this.name = name;
		this.icon = icon;
	}

	setTimeout('window.fullScreen = true;',1);

	var mode = 0;
	var common = document.getElementById('common');
	var mp3 = document.getElementById('mp3');
	var radio = document.getElementById('radio');
	var phone = document.getElementById('phone');
	var gpsMap = document.getElementById('gpsMap');
	var gpsNav = document.getElementById('gps');
	var weather = document.getElementById('weather');

	gpsMap.style.visibility = 'hidden';
	var main = document.getElementById('main');

	var googleMap = document.getElementById('googleMap');

	var volumeSlider = null;
	var muted = false;

	mp3.style.visibility = 'hidden';
	radio.style.visibility = 'hidden';
	phone.style.visibility = 'hidden';
	gpsNav.style.visibility = 'hidden';
	weather.style.visibility = 'hidden';

	var radioBars = [];
	radioBars[0] = document.getElementById('presetBar');
	radioBars[1] = document.getElementById('amBar');
	radioBars[2]= document.getElementById('fmBar');
	radioBars[3] = document.getElementById('satBar');
	radioBars[4] = document.getElementById('internetBar');
	var barPos = [];
	var oldPos = [];
	var slideBarStep = 10;

	var songs = [];//new Array("01 Track One", "02 Track Two", "03 Track Three", "04 Track Four", "05 Track Five", "06 Track Six", "07 Track Seven", "08 Track Eight", "09 Track Nine", "10 Track Ten", "11 Track Eleven", "12 Track Twelve", "13 Track Thirteen", "14 Track Fourteen", "15 Track Fifteen", "16 Track Sixteen");
	var mp3SongsList = null;


	var siriusChans = [];
	var siriusChansText = [];
	var satBarList = null;
	initializeSirius();

//	var cover = document.getElementById("mp3Cover");

	var startPath = "C:\\music";

	function init()
	{
		gpsMap.style.visibility = 'hidden';

		new button("volUp", common, volumeUp, "Vol +", 4, 4, 56, 56);
		new button("volDown", common, volumeDown, "Vol -", 4, 362, 56, 56);
		new button("volMute", common, volumeMute, "Mute", 4, 420, 56, 56);
		new button("menu", common, showMain, "Menu", 700, 420, 96, 56);
		volumeSlider = new simpleSlider("volume", common, null, 65, 4, 62, 56, 296);

		new button("radioLeftScan", radio, null, "<<", 66, 420, 76, 56);
		new button("radioRightScan", radio, null, ">>", 155, 420, 76, 56);
		satBarList = new textList("satBarList", radio, onSelectedSiriusChannel, siriusChansText, 515, 103, 165, 280);
		satBarList.setTopItem(1);
		satBarList.setSelectedItem(1);
		satBarList.setHighlightedItem(1);

		new button("navDir", gpsNav, directions, "Directions", 66, 420, 96, 56);
		new button("navSearch", gpsNav, navSearch, "Search", 166, 420, 96, 56);


		findSongs();
		new button("mp3Play", mp3, mp3Play, "Play", 66, 420, 96, 56);
		new button("mp3Rewind", mp3, null, "<<", 165, 420, 76, 56);
		new button("mp3FForward", mp3, null, ">>", 244, 420, 76, 56);
		new button("mp3Stop", mp3, mp3Stop, "Stop", 323, 420, 76, 56);
		new button("mp3Random", mp3, null, "Rand", 520, 420, 56, 56);
		new button("mp3Min", mp3, null, "Min", 580, 420, 56, 56);
		new button("mp3Day", mp3, null, "Day", 640, 420, 56, 56);
		mp3SongsList = new textList("trackNames", mp3, songSelect, songs, 515, 103, 220, 280);
		mp3SongsList.setTopItem(1);
		mp3SongsList.setSelectedItem(1);
		mp3SongsList.setHighlightedItem(2);

		toggleMode();

	}

	function findSongs()
	{
		// file is the given directory (nsIFile)
		netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

		var file = Components.classes["@mozilla.org/file/local;1"].
                     createInstance(Components.interfaces.nsILocalFile);
		file.initWithPath(startPath);

		songs = null;
		songs = [];
		songs.push("..");
		var entries = file.directoryEntries;
		var array = [];
		while(entries.hasMoreElements())
		{
			var entry = entries.getNext();
			entry.QueryInterface(Components.interfaces.nsIFile);
			if (entry.isFile())
			{
				var tempFilename = entry.leafName;
				if (tempFilename.indexOf('.mp3') != -1)
				{
					songs.push(tempFilename);
				}
				if (tempFilename == "cover.jpg")
				{
//					cover.src = "file://"+entry.path;
				}
			}
			else if (entry.isDirectory())
			{
				songs.push(entry.leafName);
			}
		}
	}

	function initializeSirius()
	{
		var xmlDoc = document.implementation.createDocument("","doc",null);
		xmlDoc.async = false;
		xmlDoc.load("siriusChannelList.xml");

		for (var i = 0; i < xmlDoc.getElementsByTagName("Channel").length; i++)
		{
			var node = xmlDoc.getElementsByTagName("Channel")[i];
			var chan = new SiriusChannel(node.getAttribute("category"), node.getAttribute("number"), node.getAttribute("desc"), node.getAttribute("name"), node.getAttribute("icon"));
			siriusChans.push(chan);
		}

		for (var i = 0; i < siriusChans.length; i++)
		{
			siriusChansText.push(siriusChans[i].number + "  " + siriusChans[i].name);
		}
	}

	function mp3Play()
	{
		var tempFile = startPath;
		tempFile += '\\' + mp3SongsList.text[mp3SongsList.selected];
		startPlay(tempFile);
	}

	function mp3Stop()
	{
		stop_cmd();
	}

	function songSelect(songNum)
	{
		mp3SongsList.setHighlightedItem(songNum);
		var tempString = mp3SongsList.text[mp3SongsList.selected];
		if (mp3SongsList.text[mp3SongsList.selected] == "..")
		{
			startPath = startPath.substring(0,startPath.lastIndexOf('\\'));
			findSongs();
			mp3SongsList.text = null;
			mp3SongsList.text = songs;
			mp3SongsList.createList();
			mp3SongsList.selected = 1;
		}
		else if (tempString.indexOf('.mp3') == -1)
		{
			startPath += '\\' + mp3SongsList.text[mp3SongsList.selected];
			findSongs();
			mp3SongsList.text = null;
			mp3SongsList.text = songs;
			mp3SongsList.createList();
			mp3SongsList.selected = 1;
		}
	}

	function volumeUp()
	{
		volumeSlider.setValue(volumeSlider.value + 1);
	}

	function volumeDown()
	{
		volumeSlider.setValue(volumeSlider.value - 1);
	}

	function volumeMute()
	{
		muted = !muted;
	}

	function showMain()
	{
		mode = 0;
		toggleMode();
	}

	function showmp3()
	{
		mode = 3;
		toggleMode();
	}

	function showRadio()
	{
		mode = 1;
		toggleMode();
	}

	function showgps()
	{
		mode = 4;
		toggleMode();
	}

	function showWeather()
	{
		mode = 5;
		toggleMode();
	}

	function toggleMode()
	{
		if (mode == 0)
		{
			main.style.visibility = 'visible';
			radio.style.visibility = 'hidden';
			satBarList.parentGroup.style.visibility = 'hidden';
			phone.style.visibility = 'hidden';
			mp3.style.visibility = 'hidden';
			gpsNav.style.visibility = 'hidden';
			gpsMap.style.visibility = 'hidden';
			weather.style.visibility = 'hidden';

//			cover.width="0";
//			cover.height = "0";
		}
		else if (mode == 1)
		{
			main.style.visibility = 'hidden';
			radio.style.visibility = 'visible';
			satBarList.parentGroup.style.visibility = 'visible';
			phone.style.visibility = 'hidden';
			mp3.style.visibility = 'hidden';
			gpsNav.style.visibility = 'hidden';
			gpsMap.style.visibility = 'hidden';
			weather.style.visibility = 'hidden';
			showTime();
//			cover.width="0";
//			cover.height = "0";
		}
		else if (mode == 2)
		{
			main.style.visibility = 'hidden';
			radio.style.visibility = 'hidden';
			satBarList.parentGroup.style.visibility = 'hidden';
			phone.style.visibility = 'visible';
			mp3.style.visibility = 'hidden';
			gpsNav.style.visibility = 'hidden';
			gpsMap.style.visibility = 'hidden';
			weather.style.visibility = 'hidden';
//			cover.width="0";
//			cover.height = "0";
		}
		else if (mode == 3)
		{
			main.style.visibility = 'hidden';
			radio.style.visibility = 'hidden';
			satBarList.parentGroup.style.visibility = 'hidden';
			phone.style.visibility = 'hidden';
			mp3.style.visibility = 'visible';
			gpsNav.style.visibility = 'hidden';
			gpsMap.style.visibility = 'hidden';
			weather.style.visibility = 'hidden';
//			cover.width="280";
//			cover.height = "280";
		}
		else if (mode == 4)
		{
			main.style.visibility = 'hidden';
			radio.style.visibility = 'hidden';
			satBarList.parentGroup.style.visibility = 'hidden';
			phone.style.visibility = 'hidden';
			mp3.style.visibility = 'hidden';
			gpsNav.style.visibility = 'visible';
			gpsMap.style.visibility = 'visible';
			weather.style.visibility = 'hidden';

//			cover.width="280";
//			cover.height = "280";

			mode = -1;
		}
		else if (mode == 5)
		{
			main.style.visibility = 'hidden';
			radio.style.visibility = 'hidden';
			satBarList.parentGroup.style.visibility = 'hidden';
			phone.style.visibility = 'hidden';
			mp3.style.visibility = 'hidden';
			gpsNav.style.visibility = 'hidden';
			gpsMap.style.visibility = 'hidden';
			weather.style.visibility = 'visible';

			requestWeather(38.778577, -90.620835);
//			requestWeather(34.5794444, -118.1155556);

//			cover.width="280";
//			cover.height = "280";

			mode = -1;
		}
		mode++;
	}

	function showTime()
	{
		var date = new Date();
		var timeText = document.getElementById('timeText');
		var hours = date.getHours();
		var minutes = date.getMinutes();
		timeText.firstChild.nodeValue = "";
		if (hours < 10)
		{
			timeText.firstChild.nodeValue += '0';
		}
		timeText.firstChild.nodeValue += hours + ":";
		if (minutes < 10)
		{
			timeText.firstChild.nodeValue += '0';
		}
		timeText.firstChild.nodeValue += minutes;
	}

	function slideBars(info)
	{
		if (slideBarStep == 10)
		{
			var location;
			var offset = 0;
			for (var i = 0; i < 5; i++)
			{
				var tempString = radioBars[i].getAttribute("transform");
				location = parseInt(tempString.substring(10));
				barPos[i] = 299 + offset;
				oldPos[i] = location;
				offset += 54;
				if (info == i)
				{
					barPos[5] = offset;
					offset += 168;
				}
			}

			slideBarStep = 0;

			satBarList.setHidden(true);

			window.setTimeout("animateSlideBars()", 30);
		}
	}

	function animateSlideBars()
	{
		var location;
		var tempText;
		slideBarStep ++;

		for (var i = 0; i < 5; i++)
		{
			var temp = oldPos[i] - ((oldPos[i] - barPos[i]) * slideBarStep / 10);
			tempText = "translate("+ temp +",103)  scale(1,1.11)";
			radioBars[i].setAttribute("transform", tempText);
		}

		if (slideBarStep != 10)
		{
			window.setTimeout("animateSlideBars()", 30);
		}
		else
		{
			satBarList.setHidden(false);
			satBarList.x = barPos[5] + 299;
			satBarList.refresh();
		}
	}

	function openMediaFile()
	{
		openFile();
		setValue("fileName", getPlayingFile());
	}

	function directions()
	{
		window.parent.frames[0].getDirections("from: (38.778577, -90.620835) to: 61 huntington pkwy, st charles, MO", document.getElementById('gpsDirections'));
	}

	function navSearch()
	{
		window.parent.frames[0].search("(38.778577, -90.620835)", document.getElementById('gpsDirections'));
	}

	function onSelectedSiriusChannel()
	{
		var num = satBarList.selected;
		var chan = siriusChans[num];
		var img = document.getElementById('siriusImage');

		var xmlDoc = document.implementation.createDocument("","doc",null);
		xmlDoc.async = false;
		xmlDoc.load(chan.icon);
		if (img.firstChild != null)
		{
			img.replaceChild(xmlDoc.documentElement, img.firstChild);
		}
		else
		{
			img.appendChild(xmlDoc.documentElement);
		}
		var tempW = 220 / img.firstChild.getAttribute("width");
		var tempY = 257 - (img.firstChild.getAttribute("height") * tempW / 2);
		var temp = "translate(75," + tempY + ") scale(" +tempW + ", " + tempW + ")"
		img.setAttribute("transform", temp);
	}


]]>
</script>

</body>
</html>





